<template>
  <nut-popup 
    v-model:visible="visible" 
    position="bottom" 
    :style="{ height: '70%' }"
    round
  >
    <view class="city-selector">
      <!-- 标题栏 -->
      <view class="header">
        <view class="title">选择城市</view>
        <view class="close-btn" @click="visible = false">
          <text>×</text>
        </view>
      </view>

      <!-- 省份选择页面 -->
      <view v-if="currentStep === 'province'" class="province-section">
        <view class="section-title">请选择省份</view>
        <view class="province-list">
          <view 
            v-for="province in provinceList" 
            :key="province.code"
            class="province-item"
            @click="selectProvince(province.code)"
          >
            <text class="province-name">{{ province.name }}</text>
            <view class="arrow">></view>
          </view>
        </view>
      </view>

      <!-- 城市选择页面 -->
      <view v-else-if="currentStep === 'city'" class="city-section">
        <!-- 返回按钮 -->
        <view class="back-header">
          <view class="back-btn" @click="backToProvince">
            <text>← 返回</text>
          </view>
          <text class="province-title">
            {{ getProvinceName(selectedProvince) }}
          </text>
        </view>

        <!-- 城市列表 -->
        <nut-elevator 
          :index-list="cityData[selectedProvince]" 
          :height="'calc(100% - 120rpx)'" 
          @click-item="(key, item) => selectCity(item.name)"
        />
      </view>
    </view>
  </nut-popup>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const props = defineProps<{
  visible: boolean;
}>();

const emit = defineEmits<{
  'update:visible': [value: boolean];
  'switch-city': [city: string];
}>();

// 响应式数据
const currentStep = ref('province');
const selectedProvince = ref('');

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
});

// 省份数据
const provinceList = [
  {
    name: '广西壮族自治区',
    code: 'guangxi'
  },
  {
    name: '广东省',
    code: 'guangdong'
  }
];

// 城市数据
const cityData: Record<string, Array<{ title: string; list: Array<{ name: string; id: number }> }>> = {
  guangxi: [
    {
      title: 'B',
      list: [
        { name: '北海市', id: 1 },
        { name: '百色市', id: 2 }
      ]
    },
    {
      title: 'C',
      list: [
        { name: '崇左市', id: 3 }
      ]
    },
    {
      title: 'F',
      list: [
        { name: '防城港市', id: 4 }
      ]
    },
    {
      title: 'G',
      list: [
        { name: '贵港市', id: 5 },
        { name: '桂林市', id: 6 }
      ]
    },
    {
      title: 'H',
      list: [
        { name: '河池市', id: 7 },
        { name: '贺州市', id: 8 }
      ]
    },
    {
      title: 'L',
      list: [
        { name: '来宾市', id: 9 },
        { name: '柳州市', id: 10 }
      ]
    },
    {
      title: 'N',
      list: [
        { name: '南宁市', id: 11 }
      ]
    },
    {
      title: 'Q',
      list: [
        { name: '钦州市', id: 12 }
      ]
    },
    {
      title: 'W',
      list: [
        { name: '梧州市', id: 13 }
      ]
    },
    {
      title: 'Y',
      list: [
        { name: '玉林市', id: 14 }
      ]
    }
  ],
  guangdong: [
    {
      title: 'C',
      list: [
        { name: '潮州市', id: 15 },
        { name: '东莞市', id: 16 }
      ]
    },
    {
      title: 'F',
      list: [
        { name: '佛山市', id: 17 }
      ]
    },
    {
      title: 'G',
      list: [
        { name: '广州市', id: 18 },
        { name: '河源市', id: 19 }
      ]
    },
    {
      title: 'H',
      list: [
        { name: '惠州市', id: 20 }
      ]
    },
    {
      title: 'J',
      list: [
        { name: '江门市', id: 21 },
        { name: '揭阳市', id: 22 }
      ]
    },
    {
      title: 'M',
      list: [
        { name: '茂名市', id: 23 },
        { name: '梅州市', id: 24 }
      ]
    },
    {
      title: 'Q',
      list: [
        { name: '清远市', id: 25 }
      ]
    },
    {
      title: 'S',
      list: [
        { name: '汕头市', id: 26 },
        { name: '汕尾市', id: 27 },
        { name: '韶关市', id: 28 },
        { name: '深圳市', id: 29 }
      ]
    },
    {
      title: 'Y',
      list: [
        { name: '阳江市', id: 30 },
        { name: '云浮市', id: 31 }
      ]
    },
    {
      title: 'Z',
      list: [
        { name: '湛江市', id: 32 },
        { name: '肇庆市', id: 33 },
        { name: '珠海市', id: 34 },
        { name: '中山市', id: 35 }
      ]
    }
  ]
};

// 方法
function selectProvince(province: string) {
  selectedProvince.value = province;
  currentStep.value = 'city';
}

function selectCity(city: string) {
  emit('switch-city', city);
  visible.value = false;
  // 重置状态
  setTimeout(() => {
    currentStep.value = 'province';
    selectedProvince.value = '';
  }, 300);
}

function backToProvince() {
  currentStep.value = 'province';
  selectedProvince.value = '';
}

function getProvinceName(code: string) {
  const province = provinceList.find(p => p.code === code);
  return province ? province.name : '';
}
</script>

<style lang="scss" scoped>
.city-selector {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
  background: #fff;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: #666;
}

.province-section {
  flex: 1;
  padding: 20rpx;
  background: #fff;
}

.section-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.province-list {
  display: flex;
  flex-direction: column;
}

.province-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background: #fff;
  
  &:active {
    background: #f5f5f5;
  }
}

.province-name {
  font-size: 28rpx;
  color: #333;
}

.arrow {
  font-size: 24rpx;
  color: #ccc;
}

.city-section {
  flex: 1;
  background: #fff;
}

.back-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
  background: #f8f8f8;
}

.back-btn {
  margin-right: 20rpx;
  color: #3b82f6;
  font-size: 28rpx;
}

.province-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}
</style>
